<script setup lang="ts">
import type { RouteRecordRaw } from 'vue-router';
import type { MenuItemRegistered } from 'element-plus';
import { useRouter } from 'vue-router';
defineOptions({
  name: 'YMenu',
});
interface Props {
  isExpand?: boolean;
  activeIndex?: string;
  routes: Array<RouteRecordRaw>;
}
const props = withDefaults(defineProps<Props>(), {
  isExpand: true,
});

const $router = useRouter();

// 点击导航的回调
const handleClick = (item: MenuItemRegistered) => {
  // console.log(item);
  $router.push(item.index);
};
</script>

<template>
  <div class="w-full">
    <el-menu :default-active="activeIndex" :collapse="!isExpand">
      <template v-for="route in routes" :key="route.path">
        <el-sub-menu v-if="route.children?.length" :index="route.path">
          <template #title>
            <el-icon v-if="route.meta?.icon">
              <component :is="route.meta?.icon"></component>
            </el-icon>
            <span>{{ route.meta?.title }}</span>
          </template>
          <Menu :routes="route.children" />
        </el-sub-menu>
        <el-menu-item v-else-if="route.path" :index="route.path" @click="handleClick">
          <template v-if="route.path">
            <el-icon v-if="route.meta?.icon">
              <component :is="route.meta?.icon"></component>
            </el-icon>
            <span>{{ route.meta?.title }}</span>
          </template>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<style scoped>
/* PC电脑端 */
@media screen and (width <= 1024px) {
}
</style>
